<template>
    <Boxtitle class='annual'>
        <template #title>
            <p>年度游客量对比</p>
        </template>
        <template #content>
            <div class="charts" ref='charts'></div>
        </template>
    </Boxtitle>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import Boxtitle from './slot/boxtitle.vue';

let charts = ref()
let option = {
    legend: {
        data: ['2024年', '2023年', '2022年',],
        textStyle: {
            color: 'white'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            // 去轴线
            axisLine: {
                show: false
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            // 去掉分割线
            splitLine: {
                show: false
            },
        }
    ],
    series: [
        {
            name: '2024年',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#FFBF00'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236,0.2)'
                    }
                ])
            },
            data: [100, 273, 385, 269, 1524, 233, 153, 604, 340, 886, 1743, 482, 930, 194, 541, 412]
        },
        {
            name: '2023年',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#FF0087'
                    },
                    {
                        offset: 1,
                        color: 'rgb(77, 119, 255,0.5)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [620, 1182, 501, 634, 420, 540, 310, 821, 731, 603, 1102, 475]
        },
        {
            name: '2022年',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(55, 162, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(116, 21, 219,0.2)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 132, 201, 534, 890, 530, 220, 603, 1101, 741, 633, 511]
        },
    ]
};
onMounted(() => {
    let mychart = echarts.init(charts.value)
    mychart.setOption(option);
})
</script>

<style scoped type="scss">
.annual {
    flex: 1;

    .charts {
        margin-top: 20px;
        height: 230px;
    }
}
</style>